<template>
  <!--卡种选择-->
  <div>
    <div class="bannerContent">
      <img src="../../assets/kazhongbanner.png" alt="" width="100%" class="banner">
      <span @click="goNext()">跳过 <img :src="src" alt="" height="10"></span>
    </div>
    <wv-panel>
      <wv-cell :title="item.goodsName+'：购买请点这里'" v-for="(item,index) in recommendVipcardList" :key="item.goodsId"
               is-link
               :to="{path:'jinkadetail',query:{goodsId:item.goodsId}}" style="font-size: 18px">
        <img :src="jinka" alt="" slot="icon" class="cell-icon" width="30">
      </wv-cell>
    </wv-panel>
   <!-- <p class="lipin">
      <router-link to="lipinka">购买礼品卡请点这里</router-link>
    </p>-->
  </div>
</template>
<script type="text/ecmascript-6">
  import {recommendVipcard, jumpRecommendVipcard} from '../../../test/unit/http'

  export default {
    name: '',
    props: {},
    data() {
      return {
        src: require('../../assets/arrow.png'),
        jinka: require('../../assets/jinka.png'),
        bojin: require('../../assets/bojin.png'),
        heika: require('../../assets/heika.png'),
        recommendVipcardList: []
      };
    },
    methods: {
      goNext() {
        jumpRecommendVipcard({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.$router.push({path: 'index'})
          }
        })
      }
    },
    created() {
      recommendVipcard({}).then(res => {
        if (res.code == 100) {
          this.recommendVipcardList = res.object;
        }
      })
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .bannerContent {
    position: relative;

    .banner {
      object-fit: cover;
    }

    span {
      position: absolute;
      top: 20px;
      right: 20px;
      color: rgba(255, 255, 255, 0.5);
      background-color: rgba(0, 0, 0, 0.2);
      padding: 3px 7px;
      border-radius: 5px;
      font-size: 12px;

      img {
        vertical-align: middle;
        margin-bottom: 2px;
      }
    }
  }

  .weui-cell__bd {
    text-align: left;
  }

  .cell-icon {
    vertical-align: middle;
    margin-right: 5px;
  }

  .weui-panel:after {
    left: 15px;
    right: 15px;
  }

  .weui-cell:before {
    right: 15px;
  }

  .weui-panel:before {
    border-top: none;
  }

  .lipin {
    margin-top: 30px;

    a {
      color: #1f1f1f;
    }
  }

</style>

